<script setup>
import { ref, onBeforeUnmount } from 'vue'
import { getCaptchaAPI, forgetPwdAPI } from '@/apis/user'
import { useRouter } from 'vue-router'

let btnDisabled = false // 按钮是否被禁用
let taskId = null
// 按钮禁用
let captchaBtnRef = ref(null)
let disabledBn = () => {
    captchaBtnRef.value.disabled = true
    captchaBtnRef.value.style.cursor = 'no-drop'
    btnDisabled = true
    // 禁用倒计时
    let time = 60
    captchaBtnRef.value.textContent = (time--) + '秒后可重发'
    taskId = setInterval(() => captchaBtnRef.value.textContent = (time--) + '秒后可重发', 1000)
    setTimeout(() => {
        captchaBtnRef.value.disabled = false
        captchaBtnRef.value.style.cursor = 'pointer'
        clearInterval(taskId)
        taskId = null
        captchaBtnRef.value.textContent = '获取短信验证码'
        btnDisabled = false
    }, 59000)
}

// 用户输入信息
let phone = ref('')
let code = ref('')

// 获取验证码
let getCaptcha = async () => {
    if (phone.value != '') {
        if (!btnDisabled) {
            // 禁用按钮
            disabledBn()
            // 发送验证码
            const res = await getCaptchaAPI(phone.value)
            if (res.code === 2000) {
                ElMessage({ type: 'success', message: '验证码已发送' })
            }
        }
    }
    else {
        ElMessage({ type: 'warning', message: '手机号不能为空' })
    }
}

const router = useRouter()
const nextStep = async () => {
    if (phone.value !== '' && code.value !== '') {
        const res = await forgetPwdAPI({ phone: phone.value, code: code.value })
        if (res.code === 2000) {
            router.replace({ path: '/resetPwd' })
        } else {
            phone.value = ''
            code.value = ''
            if (taskId) {
                clearInterval(taskId)
                taskId = null
            }
        }
    }
    else {
        ElMessage({ type: 'warning', message: '输入不能为空' })
    }
}

onBeforeUnmount(() => {
    if (taskId) {
        clearInterval(taskId)
    }
})
</script>

<template>
<div id="container">
    <div class="reset-title">
        <div class="logo">
            <a href="#"><img src="@/assets/img/logo.png"></a>
            <span class="title-1">融销通</span>
            <span class="title-2">农场品融销一体平台</span>
        </div>
    </div>
    <div class="reset-password-container">
        <div class="reset-content">
            <div class="left">
                <div class="phone">注册手机号</div>
                <div class="captcha">验证码</div>
            </div>
            <div class="right">
                <div class="phone-text">
                    <input type="text" placeholder="请输入手机号" class="input-phone" v-model="phone">
                </div>
                <div class="captcha-text">
                    <input type="text" placeholder="请输入验证码" class="input-phone" v-model="code">
                    <a href="javascript:;" class="send" ref="captchaBtnRef" @click="getCaptcha">获取验证码</a>
                </div>
                <div class="next-button">
                    <a href="javascript:;" @click="nextStep">下一步</a>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<style scoped lang='scss'>
#container {    
    background-color: #F5F5F5;
    height: 910px;
}
.reset-title {
    height: 120px;
    background-color: #fff;
    border-bottom: 2px solid rgb(49,190,62);
}
.logo {
    padding-top: 15px;
    /* padding-left: 403px; */
    padding-left: 23.6%;
}
.logo img {
    width: 100px;
    height: 90px;
}
.logo .title-1{
    color: #269c2a;
    display: inline-block;
    font-size: 20px;
    transform: translate(5px, -10px);
}
.logo .title-2{
    display: inline-block;
    transform: translate(-55px, 20px);
    font-size: 13px;

}
.reset-password-container {
    width: 800px;
    height: 700px;
    background-color: #fff;
    position: relative;
    margin: 0 auto;
    border-radius: 5px;
}
.reset-content {
    margin: 0 auto 30px;
    height: 90%;
    padding-top: 180px;
    background-color: #fff;
    display: flex;
    justify-content: center;
}
.phone {
    user-select: none;
    margin-top: 5px;
}
.password {
    user-select: none;
    margin-top: 6px;
    float: right;
}
.captcha {
    margin-top: 50px;
    user-select: none;
    float: right;
}
.repassword {
    margin-top: 76px;
    user-select: none;
}
.right input {
    border: 1px solid #ddd;
    border-radius: 5px;
    line-height: 34px;
    padding: 0 10px;
    outline: none;
}
.phone-text {
    margin-left: 50px;
    width: 260px;
}
.phone-text input {
    width: 260px;
}
.captcha-text {
    margin-top: 35px;
    margin-left: 50px;
}
.repassword-text input{
    margin-top: 35px;
    margin-left: 50px;
    width: 260px;
}
.next-button {
    cursor: pointer;
    margin-top: 50px;
}
.send {
    font-size: 14px;
    color: #39bf3e;
    margin-left: 20px;
}
.next-button {
    margin-top: 60px;
    margin-left: 45px;
    background: #45b035;
    width: 180px;
    text-align: center;
    line-height: 34px;
    border-radius: 4px;
    >a {
        display: block;
        width: 100%;
        height: 100%;
        font-size: 16px;
        color: #fff;
    }
}
.next-button1 {
    margin-top: 60px;
    background: #45b035;
    width: 180px;
    text-align: center;
    line-height: 34px;
    border-radius: 4px;
    font-size: 16px;
    color: #fff;
}
</style>
